<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <div class="box-all">

<!--      <div class="hospital"> xxx 宠物医院</div>-->

      <div class="zhongjian">
        <div class="left">
          <h1>客户信息</h1>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="客户姓名" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="客户姓名"
                clearable
                @keyup.enter.native="handleQuery"
                style="width:80%;"
              />
            </el-form-item>

            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="queryParams.phone"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter.native="handleQuery"
                style="width:80%;"
              />
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable     style="width:60%;">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

<!--            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>-->
          </el-form>
          <br>

          <h1>宠物信息</h1>

          <el-form :model="queryParamspet" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">


            <el-form-item label="宠物姓名" prop="name">
              <el-input
                v-model="queryParamspet.name"
                placeholder="宠物姓名"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="宠物年龄" prop="phone">
              <el-input
                v-model="queryParamspet.age"
                placeholder="宠物年龄"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <br>

            <el-form-item label="宠物性别" prop="sex">
              <el-select v-model="queryParamspet.sex" placeholder="请选择宠物性别" clearable>
                <el-option
                  v-for="dict in dict.type.pet_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="宠物类型" prop="type">
              <el-select v-model="queryParamspet.type" placeholder="请选择宠物类型" clearable>
                <el-option
                  v-for="dict in dict.type.pet_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <br>
            <el-form-item label="宠物体重" prop="phone">
              <el-input
                v-model="queryParamspet.weight"
                placeholder="宠物体重"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="宠物毛色" prop="phone">
              <el-input
                v-model="queryParamspet.coatColor"
                placeholder="宠物毛色"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <br>
            <el-form-item label="宠物症状" prop="symptom"  >
              <el-input
                v-model="queryParamspet.symptom"
                placeholder="宠物症状"
                clearable
                @keyup.enter.native="handleQuery"
                type="textarea"
              />
            </el-form-item>
          </el-form>

          <br>
<!--
          <h1>挂号信息</h1>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
&lt;!&ndash;            <el-autocomplete&ndash;&gt;
&lt;!&ndash;              v-model="state"&ndash;&gt;
&lt;!&ndash;              :fetch-suggestions="querySearchAsync"&ndash;&gt;
&lt;!&ndash;              placeholder="请选择挂号科室"&ndash;&gt;
&lt;!&ndash;              @select="handleSelect"&ndash;&gt;
&lt;!&ndash;            ></el-autocomplete>&ndash;&gt;
            <el-form-item label="选择科室" prop="name">
            <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入科室名称"
              @select="handleSelect"
            ></el-autocomplete>
            </el-form-item>
          </el-form>


            <el-table ref="singleTable" :data="doctorListnew"
                      style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column property="userName" label="姓名"  ></el-table-column>
              <el-table-column property="userName" label="职位"  >教授</el-table-column>
              <el-table-column property="userName" label="科室"  ></el-table-column>
              <el-table-column property="userName" label="诊察金"  >0元</el-table-column>
            </el-table>
-->



        </div>

        <div class="right">
<!--          日历-->
<!--          <el-calendar v-model="newdate"></el-calendar>-->

<!--          <div id="he-plugin-standard"></div>-->

          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="联系方式" prop="phone">
              <el-input
                v-model="queryParams.phone"
                placeholder="请输入客户手机号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>

          </el-form>

          <el-table v-loading="loading" :data="CustomerList">
            <el-table-column label="客户姓名" align="center" prop="name" />

            <el-table-column label="联系方式" align="center" prop="phone" />
            <el-table-column label="宠物名称" align="center" prop="petName" />
            <el-table-column label="年龄" align="center" prop="petAge" />
            <el-table-column label="性别"  prop="petSex"   >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.pet_sex" :value="scope.row.sex"/>
              </template>
            </el-table-column>
            <el-table-column label="种类" prop="petSex"   >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.pet_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="体重" align="center" prop="petWeight" />
            <el-table-column label="毛色" align="center" prop="petCoatColor" />
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </div>
      </div>


      <div class="bottom">
        <div id="app2">
          <el-row :gutter="10" class="mb8">
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-plus"
                @click="handleAdd"
                v-hasPermi="['hospital:customer:add']"
              >挂号</el-button>
            </el-col>

<!--            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-download"
                @click="handleExport"
                v-hasPermi="['hospital:customer:export']"
              >零售</el-button>
            </el-col>
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-download"
                @click="handleExport"
                v-hasPermi="['hospital:customer:export']"
              >系统管理</el-button>
            </el-col>
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-download"
                @click="recharge"
                v-hasPermi="['hospital:customer:export']"
              >充值</el-button>
            </el-col>-->
          </el-row>

        </div>

      </div>
    </div>
    <!-- 充值页面 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户姓名" />
        </el-form-item>
        <el-form-item label="客户手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入客户手机号" />
        </el-form-item>
        <el-form-item label="充值金额" prop="rechargeAmount">
          <el-input v-model="form.rechargeAmount" placeholder="请输入充值金额" />
        </el-form-item>
        <el-form-item label="充值类型" prop="rechargeType">
          <el-select v-model="form.rechargeType" placeholder="请选择充值类型">
            <el-option
              v-for="dict in dict.type.recharge_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<!--    手机号获取用户信息，弹出宠物列表-->
    <el-dialog title="宠物信息" :visible.sync="dialogTableVisible" >

<!--      <el-table ref="singleTable" :data="queryParams.customerPetList" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">-->
      <el-table ref="singleTable" :data="queryParams.customerPetList"           @cell-dblclick="handleCurrentChange"
                style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>

        <el-table-column property="name" label="名称"  ></el-table-column>
        <el-table-column property="age" label="年龄"  ></el-table-column>
        <el-table-column label="性别"  prop="sex"   >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pet_sex" :value="scope.row.sex"/>
          </template>
        </el-table-column>
        <el-table-column label="种类" prop="type"   >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pet_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column property="weight" label="体重"  ></el-table-column>
        <el-table-column property="coatColor" label="毛色"  ></el-table-column>
      </el-table>
    </el-dialog>
    <!--    根据科室id，弹出医生列表-->
    <el-dialog title="医生信息" :visible.sync="dialogTableVisibledoctor" >
      <el-table ref="singleTable" :data="doctorList"           @cell-dblclick="handleCurrentChangedoctor"
                style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column property="userId" label="医生编号"  ></el-table-column>
        <el-table-column property="userName" label="姓名"  ></el-table-column>
        <el-table-column property="academic_title" label="职位"  ></el-table-column>
        <el-table-column property="deptName" label="科室"></el-table-column>
        <el-table-column property="examination_fee" label="诊察金"  ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>


<script>
import { getCustomerphone, addCustomergh, addCustomerrecharge, listDeptgh, listDoctor } from '@/api/hospital/PetHospital'
import Brand from "@/views/hospital/Brand/index.vue";
import {listCustomerPet} from "@/api/hospital/Customer";


export default {
  name: "Customer",
  components: {Brand},
  dicts: ['sys_user_sex','pet_sex', 'pet_type', 'recharge_type'],
  data() {
    return {
      //日历
      newdate: new Date(),

      currentRow: null,
      dialogTableVisible: false,
      dialogTableVisibledoctor: false,
      form111: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',

      // 遮罩层
      loading: true,
      // 选中数组
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户基础信息表格数据
      CustomerList: [],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        customerId : null,
        name : null,
        age : null,
        sex : null,
        phone :null,
        address: null,
        customerType: null,
        customerTypeStr: null,
        balance: null,
        level: null,
        delFlagStr: null,
        customerPetList : [],
        rechargeAmount : null,
        rechargeType : null,

      },
      queryParamspet: {
        id : null,
        name : null,
        sex : null,
        type : null,
        coatColor : null,
        weight : null,
        symptom : null,

      },

      queryParamss: {
        customerPetList : [],
      },

      //获取医生列表
      queryParamsdoctor: {
        userId: null,
        deptId: null,
        userName: null,
        deptName: null,
        academic_title: null,
        examination_fee: null,
      },
      doctorList: [],
      doctorListnew: [],

      ghtest: {
        doctorId : null,
        deptId : null,
        customerPO :{
          id : null,
          phone : null,
          name : null,
          sex : null,
          address : null,
        },

        customerPetPO : {
          id : null,
          name : null,
          age : null,
          sex : null,
          type : null,
          weight : null,
          coatColor : null,

        },
        symptom : null

      },


      //挂号测试
      addrecharge: {
        customerId : '1',
        rechargeAmount : '100',
        rechargeType : '1',
        remarks : '测试',
      },

        // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "客户姓名不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "客户手机号不能为空", trigger: "blur" }
        ],
      },
      optionssex : [],
      optionszrsex : [],
      optionstype : [],

      queryParamsdept: {
        deptName: undefined,
        status: undefined
      },

      restaurants: [],
      state: '',
      timeout: null,

      //获取科室列表
      deptList : [],

    };
  },
  created() {

  /*  //和风天气插件调用
    window.WIDGET =  {"CONFIG":{"layout":"2","width":230,"height":270,"background":"1","dataColor":"FFFFFF","borderRadius":"5","key":"c22284bbb0674e6f8e207ee4f45c89ce"}};
    (function (d) {
      var c = d.createElement('link');
      c.rel = 'stylesheet';
      //c.href = '../static/css/he-simple.css';
      c.href = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"';
      var s = d.createElement('script');
      //s.src = '../static/js/he-simple.js';
      s.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"';
      var sn = d.getElementsByTagName('script')[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);*/

    this.getList();
  },
  methods: {

    async loadAll() {
      // //获取科室列表
      this.loading = true;
      const response =  await listDeptgh(this.queryParamsdept)
      this.loading = false;
      // this.restaurants = this.handleTree(response.data, "deptId");
      const list = response.data.map(dept => ({ value: dept.deptName, deptId: dept.deptId }));
      return list;

    },
    async querySearchAsync(queryString, cb) {
      const res = await this.restaurants
      var restaurants = res
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log(results)
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },
    handleSelect(item) {
      //选中科室， 自动获取本科室下医生列表
      console.log(item);
      //alert("科室id"+item.deptId);
      this.queryParamsdoctor.deptId = item.deptId;
      /** 查询医生列表 */
        this.loading = true;
        listDoctor(this.queryParamsdoctor).then(response => {
           this.doctorList = response.rows;
          // this.total = response.total;
          // this.loading = false;
          this.dialogTableVisibledoctor = true;
        });
    },


    /** 查询部门列表 */
    getList() {


      this.loading = true;
      listCustomerPet(this.queryParams).then(response => {
        console.log(response.rows)
        this.CustomerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

     /* this.loading = true;
      listDeptgh(this.queryParamsdept).then(response => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });*/
    },

    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.queryParamspet = val;

      //转性别
      this.optionssex = this.dict.type.pet_sex;
      const sex = val.sex;
      let option;
      this.optionssex.some(t=>{
        if(t.value==sex){
          option = t.label
          return true
        }
      })
        this.queryParamspet.sex = option;
      //转类型
      this.optionstype = this.dict.type.pet_type;
      const type = val.type;
      let optiontype;
      this.optionstype.some(t=>{
        if(t.value==type){
          optiontype = t.label
          return true
        }
      })
      this.queryParamspet.type = optiontype;
      this.dialogTableVisible = false;
    },

    //双击选中医生    弹框确认挂号信息。
    handleCurrentChangedoctor(val) {
      this.queryParamsdoctor = val;

      //赋值
      const userId = val.userId;
      const userName = val.userName;
      const deptName = val.deptName;
      const academic_title = val.academic_title;
      const examination_fee = val.examination_fee;

      //alert(this.queryParamsdoctor.userId)
      this.doctorListnew.push(this.queryParamsdoctor)

      this.dialogTableVisibledoctor = false;
    },
    /** 查询客户基础信息列表 */
    getCustomer() {

      this.loading = true;
      if(this.queryParams.phone  == null){
            alert("仅可使用手机号进行搜索，手机号不可为空！！！")
            return;
          }
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          getCustomerphone(this.queryParams.phone).then(response => {

            this.dialogTableVisible=true;
            //2023-07-05 弹框选择挂号宠物。
           // alert("选择框，选择宠物。进行挂号、  无客户信息则提示查无此人，请注册。")
              this.$modal.msgSuccess("查询成功");
              //回写到查询框， 宠物姓名选择下拉，选择挂号宠物，
              this.queryParams = response.data;

            //转性别
            this.optionszrsex = this.dict.type.sys_user_sex;
            const sex = this.queryParams.sex;
            let option;
            this.optionszrsex.some(t=>{
              if(t.value==sex){
                option = t.label
                return true
              }
            })
            this.queryParams.sex = option;

            return;
            });
        }
      });

    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        age: null,
        sex: null,
        cardNo: null,
        birthday: null,
        phone: null,
        address: null,
        customerType: null,
        tenantId: null,
        delFlag: null,
        inviteUserId: null,
        registrationType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      //this.getList();
      //根据手机号获取用户信息
      this.getCustomer();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams  = {};
      this.queryParamspet = {};
      /*this.queryParamspet = null;
      this.queryParams = null;*/
      //this.handleQuery();
    },

    /** 挂号按钮操作 */
    handleAdd() {

      this.loading = true;
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          //在这里拼装数据
          //医生科室id  默认1
          //this.ghtest.doctorId = this.queryParamsdoctor.userId;
          //this.ghtest.deptId =  this.queryParamsdoctor.deptId;

          this.ghtest.doctorId = 1;
          this.ghtest.deptId = 1;


          this.ghtest.customerPO.id = this.queryParams.customerId;
          this.ghtest.customerPO.name = this.queryParams.name;
          this.ghtest.customerPO.phone = this.queryParams.phone;
          //this.ghtest.customerPO.sex = this.queryParams.sex,
            //转性别
            if(this.queryParams.sex === '男'){
              this.ghtest.customerPO.sex = 0;
            }else if(this.queryParams.sex == '女' ){
              this.ghtest.customerPO.sex = 1;
            }else if(this.queryParams.sex == '未知'){
              this.ghtest.customerPO.sex = 2;
            }else {
              this.ghtest.customerPO.sex = this.queryParams.sex;
            };


          this.ghtest.customerPO.address = this.queryParams.address;

          this.ghtest.customerPetPO.id = this.queryParamspet.id;
          this.ghtest.customerPetPO.name = this.queryParamspet.name;
          this.ghtest.customerPetPO.age = this.queryParamspet.age;
          //this.ghtest.customerPetPO.sex = this.queryParamspet.sex,
            //转性别
          this.queryParamspet.sex;
          if( this.queryParamspet.sex == '公'){
            this.ghtest.customerPetPO.sex = 1;
          }else if( this.queryParamspet.sex == '母' ){
            this.ghtest.customerPetPO.sex = 2;
          }else if( this.queryParamspet.sex == '公绝育'){
            this.ghtest.customerPetPO.sex = 3;
          }else if( this.queryParamspet.sex == '母绝育'){
            this.ghtest.customerPetPO.sex = 4;
          }else {
            this.ghtest.customerPetPO.sex =  this.queryParamspet.sex }


          //this.ghtest.customerPetPO.type = this.queryParamspet.type;
            //转类型
          if(this.queryParamspet.type == '狗狗'){
            this.ghtest.customerPetPO.type = 1;
          }else if(this.queryParamspet.type == '猫咪' ){
            this.ghtest.customerPetPO.type = 2;
          }else if(this.queryParamspet.type == '其他' ){
            this.ghtest.customerPetPO.type = 3;
          }else {
            this.ghtest.customerPetPO.type = this.queryParamspet.type;};


          this.ghtest.customerPetPO.coatColor = this.queryParamspet.coatColor,
          this.ghtest.customerPetPO.weight = this.queryParamspet.weight,
          this.ghtest.symptom = this.queryParamspet.symptom,

            console.log(this.ghtest)
            addCustomergh(this.ghtest).then(response => {
            this.$modal.msgSuccess("挂号成功");
            //清空 queryparam 数据
              this.reset();
          });

        }
      });
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      addCustomergh(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户基础信息";
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hospital/Customer/export', {
        ...this.queryParams
      }, `Customer_${new Date().getTime()}.xlsx`)
    },
    /** 充值 */
    recharge() {
      this.reset();
      this.open = true;
      this.title = "客户充值";

    },
    /** 提交按钮 */
    submitForm() {


      this.$refs["queryForm"].validate(valid => {
        if (valid) {


          addCustomerrecharge(this.addrecharge).then(response => {
            alert(response)

            this.$modal.msgSuccess("充值成功");

          });

        }
      });
    },
  },

  mounted() {
    this.restaurants = this.loadAll();
  },


};
</script>
<style>

.box-all {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hospital {
  margin-left: 45%;
  height: 100px;
}
.zhongjian{
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.left{
  width: 60%;
  margin-right: 0%;
}

.right{
  width: 40%;
  margin-left: 0%;

}
.bottom{
  margin-left: 20%;

  height: 100px;
}




</style>
